<script src='./editorManual.js'></script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
    @import url('./editorManual.scss');
</style>

<template>
    <div class="editorManualContainer">
        <div class="editorTilte"><span>编辑</span></div>
        <div class="editorPickContainer" v-if="editorServerConfig">

            <div class="entry_scene"></div>

            <div class="light">
                <div v-for="(value, key) in editorDefaultConfig.light" :key="key">

                    <div class="ambientTitle" @click="slideToggle($event, 'ambientTitle')"><span>{{value.name}}</span><i class="el-icon-arrow-down"></i></div>

                    <div class="lightItemContainer">
                        <button class="addBtn" @click="addLight(key)"><i class="el-icon-plus"></i><span>添加光源</span></button>

                        <div v-if="editorServerConfig['light'] && editorServerConfig['light'].hasOwnProperty(key)">

                            <div v-if="key === 'AmbientLight'">
                                <div v-for="(val1, key1) in editorServerConfig['light'][key]" :key="key1" class="catContainer">
                                    <AmbientLight :data="val1"/>
                                </div>
                            </div>

                            <div v-if="key === 'DirectionalLight'">
                                <div v-for="(val1, key1) in editorServerConfig['light'][key]" :key="key1" class="catContainer">
                                    <DirectionalLight :data="val1"/>
                                </div>
                            </div>

                            <div v-if="key === 'PointLight'">
                                <div v-for="(val1, key1) in editorServerConfig['light'][key]" :key="key1" class="catContainer">
                                    <PointLight :data="val1"/>
                                </div>
                            </div>

                            <div v-if="key === 'SpotLight'">
                                <div v-for="(val1, key1) in editorServerConfig['light'][key]" :key="key1" class="catContainer">
                                    <SpotLight :data="val1"/>
                                </div>
                            </div>

                            <div v-if="key === 'HemisphereLight'">
                                <div v-for="(val1, key1) in editorServerConfig['light'][key]" :key="key1" class="catContainer">
                                    <HemisphereLight :data="val1"/>
                                </div>
                            </div>

                            <div v-if="key === 'RectAreaLight'">
                                <div v-for="(val1, key1) in editorServerConfig['light'][key]" :key="key1" class="catContainer">
                                    <RectAreaLight :data="val1"/>
                                </div>
                            </div>

                        </div>

                    </div>

                </div>
            </div>

            <div class="camera">
                <div v-for="(value, key) in editorDefaultConfig.camera" :key="key">

                    <div class="cameraTitle" @click="slideToggle($event, 'cameraTitle')"><span>{{value.name}}</span><i class="el-icon-arrow-down"></i></div>

                    <div class="cameraItemContainer">

                        <div v-if="editorServerConfig['camera'] && editorServerConfig['camera'].hasOwnProperty(key)">

                            <div v-if="key === 'PerspectiveCamera'">
                                <div v-for="(val1, key1) in editorServerConfig['camera'][key]" :key="key1" class="catContainer">
                                    <PerspectiveCamera :data="val1"/>
                                </div>
                            </div>

                        </div>

                    </div>

                </div>
            </div>

            <div class="model" v-if="editorServerConfig && editorServerConfig['model'][singleKey]">

                <div class="modelTitle">
                    <span>模型名称</span>
                    <span class="modelName">
                        <input
                                @keydown="renameModelInput"
                                type="text"
                                v-model="editorServerConfig['model'][singleKey]['name']"
                                disabled="disabled"
                        >&nbsp;

                        <i class="icon iconfont icon-xiugai editor-ico"  @click="renameModel"></i>
                    </span>
                </div>

                <div>
                    <div class="modelTitle editorTitleActive" @click="slideToggle($event, 'modelTitle')">
                        <span>坐标及尺寸</span><i class="el-icon-arrow-down"></i>
                    </div>

                    <div class="modelItemContainer">

                        <div>

                            <div class="catContainer">
                                <Model :data="editorServerConfig['model'][singleKey]" :intensityId="intensityId"/>
                            </div>

                        </div>

                    </div>
                </div>

            </div>

            <div class="mesh" v-if="editorServerConfig && isMeshMsg">
                <Mesh :data="editorMesh" :intensityId="intensityId"/>
            </div>

            <div class="material" v-if="editorMaterial.material !== null">
                <Material :data="editorMaterial" :intensityId="intensityId"/>
            </div>

            <div class="textures" v-if="editorServerConfig['textures'] && editorServerConfig['textures'][singleKey]">
                <Textures :data="editorServerConfig['textures'][singleKey]" :singleKey="singleKey"/>
            </div>

            <div class="wtText" v-if="editorServerConfig['text'] && editorServerConfig['text'][singleKey]">
                <WtText :data="editorServerConfig['text'][singleKey]"/>
            </div>

            <div class="geoInfo" v-if="editorServerConfig.geo && editorServerConfig.geo[singleKey]">
                <label>
                    <input @keydown="renameGeoInput"
                           type="text"
                           v-bind:value="editorServerConfig.geo[singleKey].name"
                           disabled="disabled"
                    >&nbsp;
                </label>
                <button class="icon iconfont icon-xiugai renameGeoBtn" @click="renameGeo"></button>
                <button class="icon iconfont icon-shanchu deleteGeoBtn" @click="deleteGeo(editorServerConfig.geo[singleKey].name)"></button>
            </div>

        </div>
    </div>
</template>